<template>
	<view class="content">
		<view class="main">
			<view style="background-color: white;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="头像" label-width="160rpx">
						<view style="display: flex; justify-content: flex-end; align-items: center;">
							<button @chooseavatar="chooseAvatar"
								style="height: 80rpx; opacity: 0; position: absolute; width: 100%;" class='sharebtn'
								open-type="chooseAvatar"></button>
							<image class="avatar" :src="form.avatar" @click="editAvatar()" />
						</view>
					</u-form-item>
					<u-form-item label="昵称" label-width="160rpx">
						<view style="display: flex; justify-content: flex-end; align-items: center;">
							<input style="color: #999999;" @blur="bindblur" @input="bindinput" type="nickname"
								v-model="form.nickName" class="weui-input" placeholder="请输入昵称" />
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="add-store" @click="submit()">确认</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				action: this.$baseUrl + '/file/upload',
				form: {
					avatar: '',
					nickName: ''
				},
				statusBarHeight: '',
				barHeight: ''
			};
		},
		computed: {
			...mapState(['vuex_user', ])
		},
		created() {
			this.form.avatar = this.vuex_user.avatar
			this.form.nickName = this.vuex_user.nickname

			// uni.$on('uAvatarCropper', (path) => {
			// 	// 可以在此上传到服务端
			// 	uni.uploadFile({
			// 		url: this.action,
			// 		filePath: path,
			// 		name: 'file',
			// 		complete: (res) => {
			// 			console.log(res);
			// 			this.form.avatar = JSON.parse(res.data).data;
			// 		}
			// 	});
			// })
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			chooseAvatar(e) {
				console.log(e);
				// this.form.avatar = e.detail.avatarUrl
				let a = uni.uploadFile({
					url: this.action,
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						console.log(res);
						this.form.avatar = JSON.parse(res.data).data
						console.log(this.form.avatar)
					}
				})

			},
			bindinput(e) {
				console.log(11);
				this.form.nickName = e.detail.value
			},
			bindblur(e) {
				console.log(e);
				this.form.nickName = e.detail.value
			},
			editAvatar() {
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			submit() {
				this.$u.api.updateInfo({
					avatar: this.form.avatar,
					nickname: this.form.nickName,
					userType: 0
				}).then((res) => {
					this.$u.toast('修改成功');
					// uni.navigateBack({
					// 	delta: 1
					// })
					uni.switchTab({
						url:'/pages/my/myIndex'
					})
				})
			},
		},
		onLoad() {}
	}
</script>

<style lang="scss">
	.weui-input {
		text-align: right;
	}

	.main {
		// background-color: rgb(245, 245, 245);
		background-color: white;
		height: 90vh;

		// /deep/ .u-input {
		// 	background-color: rgb(245, 245, 245);
		// }
	}

	.u-form-item {
		padding-left: 67rpx !important;
		padding-right: 40rpx !important;
	}

	.add-store {
		width: 692rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #FF8D5F, #FF6A55);
		border-radius: 48rpx;
		line-height: 96rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 50rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
	}

	.avatar {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
	}

	.right-arrow {
		width: 15rpx;
		height: 30rpx;
		margin-left: 40rpx;
	}
</style>